<template>
  <div>
    <div ref="echartRef" style="width: 800px; height: 400px;"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts';
import {getBestBusinessman} from "@/api/supplier/orders";

export default {
  name: 'EChartComponent',
  data() {
    return {
      // 图表实例
      echartInstance: null,
      // 初始数据
      data: [],
      maxData: [],
    };
  },
  mounted() {
    // 基于准备好的dom，初始化echarts实例
    this.echartInstance = echarts.init(this.$refs.echartRef);

    // 指定图表的配置项和数据
    const option = {
      title: {
        text: '你说得对但是我要斗蛐蛐'
      },
      xAxis: {
        max: 'dataMax',
      },
      yAxis: {
        type: 'category',
        data: [],
        inverse: true,
        animationDuration: 300,
        animationDurationUpdate: 300,
        max: 4, // only the largest 3 bars will be displayed
        axisLabel: {
          interval: 0,
          formatter: function (value) {
            // 将长文本分行显示
            let maxLength = 5;
            let valLength = value.length;
            let rowN = Math.ceil(valLength / maxLength); // 行数
            let ret = "";
            for (let i = 0; i < rowN; i++) {
              let temp = "";
              let start = i * maxLength;
              let end = start + maxLength;
              temp = value.substring(start, end) + "\n";
              ret += temp; // 加上换行符
            }
            return ret;
          },
          rich: {
            align: 'left'
          }
        },
      },
      series: [
        {
          realtimeSort: true,
          name: '销售额',
          type: 'bar',
          data: this.data,
          label: {
            show: true,
            position: 'right',
            valueAnimation: true,
          },
        },
      ],
      legend: {
        show: true,
      },
      animationDuration: 0,
      animationDurationUpdate: 3000,
      animationEasing: 'linear',
      animationEasingUpdate: 'linear',
    };

    getBestBusinessman().then(response => {
      console.log(response);
      response.data.forEach((item) => {
        this.maxData.push(item.value);
        option.yAxis.data.push(item.key);
        this.data.push(0);
      })
      console.log(option);

      // 使用刚指定的配置项和数据显示图表。
      this.echartInstance.setOption(option);
    });

    this.updateData();
    this.startDataUpdate();
  },
  methods: {
    generateRandomData() {
      const data = this.data;
      for (let i = 0; i < data.length; ++i) {
        data[i] = Math.min(Math.round(Math.random() * 3000) + data[i], this.maxData[i]);
      }
      return data;
    },
    updateData() {
      this.data = this.generateRandomData();
      this.echartInstance.setOption({
        series: [
          {
            data: this.data,
          },
        ],
      });
    },
    startDataUpdate() {
      setInterval(this.updateData, 3000);
    },
  },
  beforeDestroy() {
    // 组件销毁前，销毁ECharts实例
    if (this.echartInstance) {
      this.echartInstance.dispose();
    }
  },
};
</script>

<style>
/* 在这里添加样式 */
</style>
